<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Vue2.x常见面试题 | 小马过河</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/img/manong.jpg">
    <script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
    <link rel="manifest" href="/manifest.json">
    <link rel="apple-touch-icon" href="/img/mxx-152-152.png">
    <meta name="description" content="本章为小马学习——Vue常见得面试题">
    <meta name="keywords" content="马新想 小马学习 编程学习 Vue vue面试题 面试题">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="theme-color" content="#ededed">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="msapplication-TileColor" content="#000000">
    <meta name="msapplication-TileImage" content="/img/mxx-144.png">
    
    <link rel="preload" href="/assets/css/0.styles.154256f1.css" as="style"><link rel="preload" href="/assets/js/app.f1a8d465.js" as="script"><link rel="preload" href="/assets/js/2.5bab2b7d.js" as="script"><link rel="preload" href="/assets/js/99.95d4993f.js" as="script"><link rel="preload" href="/assets/js/4.dca68745.js" as="script"><link rel="prefetch" href="/assets/js/10.586b05b4.js"><link rel="prefetch" href="/assets/js/100.17640669.js"><link rel="prefetch" href="/assets/js/101.9c523894.js"><link rel="prefetch" href="/assets/js/102.27347aba.js"><link rel="prefetch" href="/assets/js/103.37a029fe.js"><link rel="prefetch" href="/assets/js/104.1d8f728c.js"><link rel="prefetch" href="/assets/js/105.8081ec6e.js"><link rel="prefetch" href="/assets/js/11.28ad280e.js"><link rel="prefetch" href="/assets/js/12.5e108f27.js"><link rel="prefetch" href="/assets/js/13.3678126c.js"><link rel="prefetch" href="/assets/js/14.505a08b7.js"><link rel="prefetch" href="/assets/js/15.8f3c0c53.js"><link rel="prefetch" href="/assets/js/16.4256e6cb.js"><link rel="prefetch" href="/assets/js/17.17d3d968.js"><link rel="prefetch" href="/assets/js/18.73488ae7.js"><link rel="prefetch" href="/assets/js/19.9d056309.js"><link rel="prefetch" href="/assets/js/20.52185694.js"><link rel="prefetch" href="/assets/js/21.3b7e8437.js"><link rel="prefetch" href="/assets/js/22.4d4d8a8b.js"><link rel="prefetch" href="/assets/js/23.dac1a360.js"><link rel="prefetch" href="/assets/js/24.798b5147.js"><link rel="prefetch" href="/assets/js/25.16d30679.js"><link rel="prefetch" href="/assets/js/26.3e5e50ab.js"><link rel="prefetch" href="/assets/js/27.99e01b84.js"><link rel="prefetch" href="/assets/js/28.86b7c539.js"><link rel="prefetch" href="/assets/js/29.ea981f89.js"><link rel="prefetch" href="/assets/js/3.c22f362a.js"><link rel="prefetch" href="/assets/js/30.6c923d43.js"><link rel="prefetch" href="/assets/js/31.df940781.js"><link rel="prefetch" href="/assets/js/32.3e5a19c7.js"><link rel="prefetch" href="/assets/js/33.0936aa71.js"><link rel="prefetch" href="/assets/js/34.566820dc.js"><link rel="prefetch" href="/assets/js/35.e263f3e4.js"><link rel="prefetch" href="/assets/js/36.32ae1d3b.js"><link rel="prefetch" href="/assets/js/37.ac0fe1ce.js"><link rel="prefetch" href="/assets/js/38.5ff1b8eb.js"><link rel="prefetch" href="/assets/js/39.da39237f.js"><link rel="prefetch" href="/assets/js/40.c92cf280.js"><link rel="prefetch" href="/assets/js/41.b2318f21.js"><link rel="prefetch" href="/assets/js/42.9e98acc0.js"><link rel="prefetch" href="/assets/js/43.6a890842.js"><link rel="prefetch" href="/assets/js/44.8c501675.js"><link rel="prefetch" href="/assets/js/45.a7b73149.js"><link rel="prefetch" href="/assets/js/46.08c4dcbb.js"><link rel="prefetch" href="/assets/js/47.0fa3a317.js"><link rel="prefetch" href="/assets/js/48.15f53959.js"><link rel="prefetch" href="/assets/js/49.f9b62975.js"><link rel="prefetch" href="/assets/js/5.49ddc4eb.js"><link rel="prefetch" href="/assets/js/50.5d678fce.js"><link rel="prefetch" href="/assets/js/51.f07100da.js"><link rel="prefetch" href="/assets/js/52.25782c95.js"><link rel="prefetch" href="/assets/js/53.1151ca9a.js"><link rel="prefetch" href="/assets/js/54.86132d90.js"><link rel="prefetch" href="/assets/js/55.5e273c50.js"><link rel="prefetch" href="/assets/js/56.94d89ae7.js"><link rel="prefetch" href="/assets/js/57.ff4f6ce5.js"><link rel="prefetch" href="/assets/js/58.d6bba7bf.js"><link rel="prefetch" href="/assets/js/59.fd39aa8f.js"><link rel="prefetch" href="/assets/js/6.73ba3b93.js"><link rel="prefetch" href="/assets/js/60.3b547209.js"><link rel="prefetch" href="/assets/js/61.c2746621.js"><link rel="prefetch" href="/assets/js/62.c7246830.js"><link rel="prefetch" href="/assets/js/63.8cf018aa.js"><link rel="prefetch" href="/assets/js/64.5982f68e.js"><link rel="prefetch" href="/assets/js/65.6a323f0b.js"><link rel="prefetch" href="/assets/js/66.df6d599d.js"><link rel="prefetch" href="/assets/js/67.5c26c24c.js"><link rel="prefetch" href="/assets/js/68.e53dceea.js"><link rel="prefetch" href="/assets/js/69.65ee4851.js"><link rel="prefetch" href="/assets/js/7.541920c5.js"><link rel="prefetch" href="/assets/js/70.4bfafea4.js"><link rel="prefetch" href="/assets/js/71.b4f496a8.js"><link rel="prefetch" href="/assets/js/72.1b1ffea6.js"><link rel="prefetch" href="/assets/js/73.8929e1c4.js"><link rel="prefetch" href="/assets/js/74.d3c5fcad.js"><link rel="prefetch" href="/assets/js/75.9d01a456.js"><link rel="prefetch" href="/assets/js/76.3149b796.js"><link rel="prefetch" href="/assets/js/77.3abe6bd4.js"><link rel="prefetch" href="/assets/js/78.ae477312.js"><link rel="prefetch" href="/assets/js/79.00837d52.js"><link rel="prefetch" href="/assets/js/8.a50175f7.js"><link rel="prefetch" href="/assets/js/80.d626622b.js"><link rel="prefetch" href="/assets/js/81.ad2df06d.js"><link rel="prefetch" href="/assets/js/82.9ac0d88a.js"><link rel="prefetch" href="/assets/js/83.b23219b4.js"><link rel="prefetch" href="/assets/js/84.55f2741f.js"><link rel="prefetch" href="/assets/js/85.33b715e5.js"><link rel="prefetch" href="/assets/js/86.85aea4fa.js"><link rel="prefetch" href="/assets/js/87.6fd2f3fa.js"><link rel="prefetch" href="/assets/js/88.a9ea00b4.js"><link rel="prefetch" href="/assets/js/89.7e58e472.js"><link rel="prefetch" href="/assets/js/9.83acbe8c.js"><link rel="prefetch" href="/assets/js/90.e15687d5.js"><link rel="prefetch" href="/assets/js/91.026b108a.js"><link rel="prefetch" href="/assets/js/92.840afd12.js"><link rel="prefetch" href="/assets/js/93.00439ef2.js"><link rel="prefetch" href="/assets/js/94.6c994a63.js"><link rel="prefetch" href="/assets/js/95.e3dd6367.js"><link rel="prefetch" href="/assets/js/96.cbe1207c.js"><link rel="prefetch" href="/assets/js/97.34584059.js"><link rel="prefetch" href="/assets/js/98.9b2de21d.js">
    <link rel="stylesheet" href="/assets/css/0.styles.154256f1.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="layout-wrapper"><!----> <div class="theme-container"><header class="navbar ele-navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/img/manong.jpg" alt="小马过河" class="logo"> <span class="site-name can-hide">小马过河</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><!----> <a href="/" class="nav-link">
  首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="导航" class="dropdown-title"><span class="title">导航</span> <span class="arrow down"></span></button> <button type="button" aria-label="导航" class="mobile-dropdown-title"><span class="title">导航</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/nav/nav.html" class="nav-link">
  常用站点
</a></li><li class="dropdown-item"><!----> <a href="/nav/web.html" class="nav-link">
  前端站点
</a></li><li class="dropdown-item"><!----> <a href="/nav/afterEnd.html" class="nav-link">
  后端站点
</a></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><span class="title">前端</span> <span class="arrow down"></span></button> <button type="button" aria-label="前端" class="mobile-dropdown-title"><span class="title">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          CSS+HTML系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/csshtml/css-formatContent.html" class="nav-link">
  CSS格式化上下文
</a></li><li class="dropdown-subitem"><a href="/web/csshtml/css-bfc.html" class="nav-link">
  CSS的BFC
</a></li></ul></li><li class="dropdown-item"><h4>
          JS系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/js/js-prototype.html" class="nav-link">
  JS-原型与原型链
</a></li><li class="dropdown-subitem"><a href="/web/js/js-context.html" class="nav-link">
  JS-执行上下文
</a></li></ul></li><li class="dropdown-item"><h4>
          Vue2系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/vue/mvvm.html" class="nav-link">
  Vue响应式
</a></li></ul></li><li class="dropdown-item"><h4>
          常见面试题
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/question/css.html" class="nav-link">
  CSS面试题
</a></li><li class="dropdown-subitem"><a href="/web/question/vue.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  Vue2.x面试题
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Java" class="dropdown-title"><span class="title">Java</span> <span class="arrow down"></span></button> <button type="button" aria-label="Java" class="mobile-dropdown-title"><span class="title">Java</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          基础系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/basics/know.html" class="nav-link">
  Java初识
</a></li><li class="dropdown-subitem"><a href="/java/basics/number.html" class="nav-link">
  Java数字
</a></li><li class="dropdown-subitem"><a href="/java/basics/string.html" class="nav-link">
  Java字符串
</a></li></ul></li><li class="dropdown-item"><h4>
          集合
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/collection/collection.html" class="nav-link">
  Collection集合
</a></li><li class="dropdown-subitem"><a href="/java/collection/list.html" class="nav-link">
  List集合
</a></li></ul></li><li class="dropdown-item"><h4>
          IO操作
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/io/" class="nav-link">
  IO初识
</a></li></ul></li><li class="dropdown-item"><h4>
          网络编程
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/network/ip.html" class="nav-link">
  IP操作
</a></li></ul></li><li class="dropdown-item"><h4>
          JDBC操作
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/jdbc/mysql-connect.html" class="nav-link">
  MySQL操作
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="数据库" class="dropdown-title"><span class="title">数据库</span> <span class="arrow down"></span></button> <button type="button" aria-label="数据库" class="mobile-dropdown-title"><span class="title">数据库</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          MySQL系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/database/mysql/init.html" class="nav-link">
  常用语法
</a></li><li class="dropdown-subitem"><a href="/database/mysql/data-type.html" class="nav-link">
  数据类型
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="设计模式" class="dropdown-title"><span class="title">设计模式</span> <span class="arrow down"></span></button> <button type="button" aria-label="设计模式" class="mobile-dropdown-title"><span class="title">设计模式</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/designMode/observer.html" class="nav-link">
  观察者模式
</a></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="运维/工具" class="dropdown-title"><span class="title">运维/工具</span> <span class="arrow down"></span></button> <button type="button" aria-label="运维/工具" class="mobile-dropdown-title"><span class="title">运维/工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          Maven
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/tools/maven/" class="nav-link">
  初识
</a></li></ul></li><li class="dropdown-item"><h4>
          Tomcat
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/tools/tomcat/" class="nav-link">
  初识
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="English" class="dropdown-title"><span class="title">English</span> <span class="arrow down"></span></button> <button type="button" aria-label="English" class="mobile-dropdown-title"><span class="title">English</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          英语读音
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/english/pronunciation/phonogram.html" class="nav-link">
  音标
</a></li></ul></li><li class="dropdown-item"><h4>
          英语单词
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/english/word/call.html" class="nav-link">
  电话
</a></li><li class="dropdown-subitem"><a href="/english/word/daily-life.html" class="nav-link">
  日常生活
</a></li><li class="dropdown-subitem"><a href="/english/word/animal.html" class="nav-link">
  动物
</a></li></ul></li><li class="dropdown-item"><h4>
          英语语法
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/english/grammar/sentence.html" class="nav-link">
  句子成分
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Study" class="dropdown-title"><span class="title">Study</span> <span class="arrow down"></span></button> <button type="button" aria-label="Study" class="mobile-dropdown-title"><span class="title">Study</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/study/computers/" class="nav-link">
  计算机基础
</a></li><li class="dropdown-item"><!----> <a href="/study/web/" class="nav-link">
  前端知识路线
</a></li><li class="dropdown-item"><!----> <a href="/study/java/" class="nav-link">
  Java知识路线
</a></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Self" class="dropdown-title"><span class="title">Self</span> <span class="arrow down"></span></button> <button type="button" aria-label="Self" class="mobile-dropdown-title"><span class="title">Self</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/self/work/" class="nav-link">
  工作
</a></li></ul></div> <!----></div> <!----></nav> <div class="loginItem"><!----></div></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><!----> <a href="/" class="nav-link">
  首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="导航" class="dropdown-title"><span class="title">导航</span> <span class="arrow down"></span></button> <button type="button" aria-label="导航" class="mobile-dropdown-title"><span class="title">导航</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/nav/nav.html" class="nav-link">
  常用站点
</a></li><li class="dropdown-item"><!----> <a href="/nav/web.html" class="nav-link">
  前端站点
</a></li><li class="dropdown-item"><!----> <a href="/nav/afterEnd.html" class="nav-link">
  后端站点
</a></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><span class="title">前端</span> <span class="arrow down"></span></button> <button type="button" aria-label="前端" class="mobile-dropdown-title"><span class="title">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          CSS+HTML系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/csshtml/css-formatContent.html" class="nav-link">
  CSS格式化上下文
</a></li><li class="dropdown-subitem"><a href="/web/csshtml/css-bfc.html" class="nav-link">
  CSS的BFC
</a></li></ul></li><li class="dropdown-item"><h4>
          JS系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/js/js-prototype.html" class="nav-link">
  JS-原型与原型链
</a></li><li class="dropdown-subitem"><a href="/web/js/js-context.html" class="nav-link">
  JS-执行上下文
</a></li></ul></li><li class="dropdown-item"><h4>
          Vue2系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/vue/mvvm.html" class="nav-link">
  Vue响应式
</a></li></ul></li><li class="dropdown-item"><h4>
          常见面试题
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/question/css.html" class="nav-link">
  CSS面试题
</a></li><li class="dropdown-subitem"><a href="/web/question/vue.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  Vue2.x面试题
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Java" class="dropdown-title"><span class="title">Java</span> <span class="arrow down"></span></button> <button type="button" aria-label="Java" class="mobile-dropdown-title"><span class="title">Java</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          基础系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/basics/know.html" class="nav-link">
  Java初识
</a></li><li class="dropdown-subitem"><a href="/java/basics/number.html" class="nav-link">
  Java数字
</a></li><li class="dropdown-subitem"><a href="/java/basics/string.html" class="nav-link">
  Java字符串
</a></li></ul></li><li class="dropdown-item"><h4>
          集合
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/collection/collection.html" class="nav-link">
  Collection集合
</a></li><li class="dropdown-subitem"><a href="/java/collection/list.html" class="nav-link">
  List集合
</a></li></ul></li><li class="dropdown-item"><h4>
          IO操作
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/io/" class="nav-link">
  IO初识
</a></li></ul></li><li class="dropdown-item"><h4>
          网络编程
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/network/ip.html" class="nav-link">
  IP操作
</a></li></ul></li><li class="dropdown-item"><h4>
          JDBC操作
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/jdbc/mysql-connect.html" class="nav-link">
  MySQL操作
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="数据库" class="dropdown-title"><span class="title">数据库</span> <span class="arrow down"></span></button> <button type="button" aria-label="数据库" class="mobile-dropdown-title"><span class="title">数据库</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          MySQL系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/database/mysql/init.html" class="nav-link">
  常用语法
</a></li><li class="dropdown-subitem"><a href="/database/mysql/data-type.html" class="nav-link">
  数据类型
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="设计模式" class="dropdown-title"><span class="title">设计模式</span> <span class="arrow down"></span></button> <button type="button" aria-label="设计模式" class="mobile-dropdown-title"><span class="title">设计模式</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/designMode/observer.html" class="nav-link">
  观察者模式
</a></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="运维/工具" class="dropdown-title"><span class="title">运维/工具</span> <span class="arrow down"></span></button> <button type="button" aria-label="运维/工具" class="mobile-dropdown-title"><span class="title">运维/工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          Maven
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/tools/maven/" class="nav-link">
  初识
</a></li></ul></li><li class="dropdown-item"><h4>
          Tomcat
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/tools/tomcat/" class="nav-link">
  初识
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="English" class="dropdown-title"><span class="title">English</span> <span class="arrow down"></span></button> <button type="button" aria-label="English" class="mobile-dropdown-title"><span class="title">English</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          英语读音
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/english/pronunciation/phonogram.html" class="nav-link">
  音标
</a></li></ul></li><li class="dropdown-item"><h4>
          英语单词
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/english/word/call.html" class="nav-link">
  电话
</a></li><li class="dropdown-subitem"><a href="/english/word/daily-life.html" class="nav-link">
  日常生活
</a></li><li class="dropdown-subitem"><a href="/english/word/animal.html" class="nav-link">
  动物
</a></li></ul></li><li class="dropdown-item"><h4>
          英语语法
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/english/grammar/sentence.html" class="nav-link">
  句子成分
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Study" class="dropdown-title"><span class="title">Study</span> <span class="arrow down"></span></button> <button type="button" aria-label="Study" class="mobile-dropdown-title"><span class="title">Study</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/study/computers/" class="nav-link">
  计算机基础
</a></li><li class="dropdown-item"><!----> <a href="/study/web/" class="nav-link">
  前端知识路线
</a></li><li class="dropdown-item"><!----> <a href="/study/java/" class="nav-link">
  Java知识路线
</a></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Self" class="dropdown-title"><span class="title">Self</span> <span class="arrow down"></span></button> <button type="button" aria-label="Self" class="mobile-dropdown-title"><span class="title">Self</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/self/work/" class="nav-link">
  工作
</a></li></ul></div> <!----></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>CSS+HTML系列</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>JS系列</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Vue2.x系列</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Vue3.x系列</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>常见面试题</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/web/question/" aria-current="page" class="sidebar-link">前言</a></li><li><a href="/web/question/css.html" class="sidebar-link">CSS 常见面试题</a></li><li><a href="/web/question/vue.html" aria-current="page" class="active sidebar-link">Vue2.x常见面试题</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="main"><div class="content"><div class="theme-default-content content__default"><h1 id="vue2-x常见面试题"><a href="#vue2-x常见面试题" class="header-anchor">#</a> Vue2.x常见面试题</h1> <p></p><div class="table-of-contents"><ul><li><a href="#对mvvm的理解">对MVVM的理解</a></li><li><a href="#vue的生命周期">vue的生命周期</a></li><li><a href="#vue的常用指令有那些">vue的常用指令有那些</a></li><li><a href="#v-if-和-v-show的区别">v-if 和 v-show的区别</a></li><li><a href="#绑定class的数组用法">绑定class的数组用法</a></li><li><a href="#v-on可以监听多个方法么">v-on可以监听多个方法么</a></li><li><a href="#vue事件中如何使用event对象">vue事件中如何使用event对象</a></li><li><a href="#vue中的数据传递">vue中的数据传递</a></li><li><a href="#keep-alive的作用">keep-alive的作用</a></li><li><a href="#refs的作用">$refs的作用</a></li><li><a href="#vue中为什么使用key">vue中为什么使用key</a></li><li><a href="#nexttick的作用">$nextTick的作用</a></li><li><a href="#开发组件如何自定义v-model">开发组件如何自定义v-model</a></li><li><a href="#computed和watch的区别与应用">computed和watch的区别与应用</a></li><li><a href="#简单说一下vue中双向数据绑定">简单说一下vue中双向数据绑定</a></li><li><a href="#router和-route的区别">$router和$route的区别</a></li><li><a href="#params和query的区别">params和query的区别</a></li><li><a href="#vue-router导航钩子函数">vue-router导航钩子函数</a></li><li><a href="#在vue中多页面如何共享数据">在vue中多页面如何共享数据</a></li><li><a href="#vuex是什么-什么时候使用">vuex是什么，什么时候使用</a></li></ul></div><p></p> <p>🐴</p> <h2 id="对mvvm的理解"><a href="#对mvvm的理解" class="header-anchor">#</a> 对MVVM的理解</h2> <p><code>MVVM</code>分为<code>Model</code>、<code>View</code>、<code>ViewModel</code>三者。</p> <ul><li><code>Model</code>：代表数据模型，数据和业务逻辑都在<code>Model</code>层中定义；</li> <li><code>View</code>：代表UI视图，负责数据的展示；</li> <li><code>ViewModel</code>：负责监听<code>Model</code>中数据的改变并且控制视图的更新，处理用户交互操作；</li></ul> <p><code>Model</code>和<code>View</code>并无直接关联，而是通过<code>ViewModel</code>来进行联系的，<code>Model</code>和<code>ViewModel</code>之间有着双向数据绑定的联系。因此当<code>Model</code>中的数据改变时会触发<code>View</code>层的刷新，<code>View</code>中由于用户交互操作而改变的数据也会在<code>Model</code>中同步。</p> <p>这种模式实现了<code>Model</code>和<code>View</code>的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作<code>dom</code>。</p> <h2 id="vue的生命周期"><a href="#vue的生命周期" class="header-anchor">#</a> vue的生命周期</h2> <ul><li><code>beforeCreate</code> 在这个生命周期，<code>vue</code>事件和生命周期开始初始化，但是数据还没有初始化</li> <li><code>created</code> 这个生命周期中<code>vue</code>数据初始化完成，可以访问<code>data</code>中的数据，一般在该生命周期进行<code>http</code>数据请求</li> <li><code>beforeMount</code> 这个生命周期中<code>vue</code>首次调用<code>render</code>函数，生成了虚拟<code>dom</code>,但是还没有真实<code>dom</code></li> <li><code>mounted</code> 这个生命周期真实<code>DOM</code>以及生成，可以在该生命周期做一些<code>DOM</code>操作</li> <li><code>beforeUpdate</code> 该生命周期是在数据有更新时，会被执行</li> <li><code>updated</code> 该生命周期是在组件更新完成（重新渲染<code>DOM</code>）后被调用</li> <li><code>beforeDestroy</code> 该生命周期是在组件被销毁前调用，在该周期还可以访问实例数据。</li> <li><code>destroyed</code> 该生命周期是在组件被销毁后调用。</li></ul> <div class="imageWrapper" data-v-a88366f6><div class="image" data-v-a88366f6><img src="https://cn.vuejs.org/images/lifecycle.png" alt width="250" data-v-a88366f6></div> <!----> <div class="imgModel" style="display:none;" data-v-a88366f6><img src="https://cn.vuejs.org/images/lifecycle.png" class="scaleImg" data-v-a88366f6></div></div> <h2 id="vue的常用指令有那些"><a href="#vue的常用指令有那些" class="header-anchor">#</a> vue的常用指令有那些</h2> <p><code>v-html</code>,<code>v-text</code>,<code>v-bind</code>,<code>v-model</code>,<code>v-on</code>,<code>v-for</code>,<code>v-show</code>,<code>v-if</code></p> <h2 id="v-if-和-v-show的区别"><a href="#v-if-和-v-show的区别" class="header-anchor">#</a> v-if 和 v-show的区别</h2> <p><code>v-if</code> 和 <code>v-show</code>都可以控制<code>DOM</code>元素的显示和隐藏，不同的是：</p> <ul><li><code>v-if</code> 显示隐藏是通过控制<code>DOM</code>节点的显示隐藏来实现的</li> <li><code>v-show</code>  显示隐藏是通过控制<code>CSS</code>的<code>display</code>属性实现的</li></ul> <p>所以<code>v-if</code>在性能上的开销要比<code>v-show</code>大。同时如果是组件<code>v-if</code>的显示隐藏也会重新触发组件中的生命周期（重新渲染）。</p> <p>当我们需要大量的显示隐藏操作时，尽可能的使用<code>v-show</code></p> <h2 id="绑定class的数组用法"><a href="#绑定class的数组用法" class="header-anchor">#</a> 绑定class的数组用法</h2> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!--数组语法--&gt;</span> 
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[calssOne,classTwo]<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

   <span class="token comment">&lt;!--对象语法--&gt;</span> 
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>classObj<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
 <span class="token keyword">export</span> <span class="token keyword">default</span><span class="token punctuation">{</span>
    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
       <span class="token keyword">return</span> <span class="token punctuation">{</span>
         classOne<span class="token operator">:</span><span class="token string">&quot;classOne&quot;</span><span class="token punctuation">,</span>
         classTwo<span class="token operator">:</span><span class="token string">&quot;classTwo&quot;</span><span class="token punctuation">,</span>
       <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    computed<span class="token operator">:</span><span class="token punctuation">{</span>
      <span class="token function">classObj</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">{</span>
          class1<span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span>
          class2<span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span>
          class3<span class="token operator">:</span><span class="token boolean">false</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
 <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="v-on可以监听多个方法么"><a href="#v-on可以监听多个方法么" class="header-anchor">#</a> v-on可以监听多个方法么</h2> <p><code>v-on</code>可以监听多个方法</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">v-on</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{mouseenter: onEnter,mouseleave: onLeave}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>鼠标滑进移出<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="vue事件中如何使用event对象"><a href="#vue事件中如何使用event对象" class="header-anchor">#</a> vue事件中如何使用event对象</h2> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>clickBtn($event)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token function">clickBtn</span><span class="token punctuation">(</span><span class="token parameter">$e</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>$e<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="vue中的数据传递"><a href="#vue中的数据传递" class="header-anchor">#</a> vue中的数据传递</h2> <ul><li>父组件向子组件传递</li></ul> <p>父组件通过<code>v-bind</code>绑定数据，子组件通过<code>props</code>接收</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token comment">&lt;!--父组件--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>children</span> <span class="token attr-name">:dataObj</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{name:<span class="token punctuation">'</span>test<span class="token punctuation">'</span>}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>children</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!--子组件--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  props<span class="token operator">:</span><span class="token punctuation">{</span>
    dataObj<span class="token operator">:</span><span class="token punctuation">{</span>
      type<span class="token operator">:</span> Object
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ul><li>子组件向父组件传递</li></ul> <p>子组件通过<code>$emit</code>触发父组件中自定义事件，通过参数来传递数据</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token comment">&lt;!--父组件--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>children</span> <span class="token attr-name">@getFun</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>testFun<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>children</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token function">testFun</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token comment">// data 为 1</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!--子组件--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  methods<span class="token operator">:</span><span class="token punctuation">{</span>
    <span class="token function">pushParentData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">&quot;getFun&quot;</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ul><li>其它组件间传递</li></ul> <p>其它组件间传递可以通过两个组件最近的祖辈组件作为桥梁进行数据传递</p> <p>使用<code>vuex</code>进行数据共享</p> <p>或者使用一个公共的<code>vue</code>实例来共享数据</p> <h2 id="keep-alive的作用"><a href="#keep-alive的作用" class="header-anchor">#</a> keep-alive的作用</h2> <p><code>&lt;keep-alive&gt;</code>是<code>vue</code>内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染<code>DOM</code>,<code>keep-alive</code>是用在一个直属子组件被开关的情形，同时只有一个子组件在渲染，若有<code>v-for</code>则不会工作</p> <p><code>keep-alive</code>中常用的属性</p> <ul><li><code>include</code> 字符串或正则表达式，只有名称匹配的组件会被缓存</li> <li><code>exclude</code> 字符串或正则表达式，名称匹配的组件不会被缓存</li> <li><code>max</code>  数字，最多可以缓存多少组件实例</li></ul> <p>匹配首先检查组件自身的<code>name</code> 选项，如果 <code>name</code> 选项不可用，则匹配它的局部注册名称 (父组件 <code>components</code> 选项的键值)。匿名组件不能被匹配。</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token comment">&lt;!-- 逗号分隔字符串 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>keep-alive</span> <span class="token attr-name">include</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a,b<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>component</span> <span class="token attr-name">:is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>view<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>component</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>keep-alive</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- 正则表达式 (使用 `v-bind`) --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>keep-alive</span> <span class="token attr-name">:include</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/a|b/<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>component</span> <span class="token attr-name">:is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>view<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>component</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>keep-alive</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- 数组 (使用 `v-bind`) --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>keep-alive</span> <span class="token attr-name">:include</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[<span class="token punctuation">'</span>a<span class="token punctuation">'</span>, <span class="token punctuation">'</span>b<span class="token punctuation">'</span>]<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>component</span> <span class="token attr-name">:is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>view<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>component</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>keep-alive</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>被<code>keep-alive</code>包裹的组件会有下面两个生命周期</p> <ul><li><code>activated</code> 组件显示时会触发</li> <li><code>deactivated</code> 离开该组件时会触发</li></ul> <h2 id="refs的作用"><a href="#refs的作用" class="header-anchor">#</a> $refs的作用</h2> <p>在<code>vue</code>中我们获取<code>dom</code>元素或组件的实例可以通过<code>$refs</code> 来获取</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>divRef<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>component</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>comRef<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>组件<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>component</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>divRef <span class="token comment">// 获取div dom 元素</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>comRef <span class="token comment">// 获取component 组件实例</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="vue中为什么使用key"><a href="#vue中为什么使用key" class="header-anchor">#</a> vue中为什么使用key</h2> <p><code>key</code>具有唯一性, 以便它能跟踪每个节点的身份，在<code>diff</code>算法执行时更快的找到对应的节点，提高<code>diff</code>速度，使<code>vue</code>更快的渲染</p> <h2 id="nexttick的作用"><a href="#nexttick的作用" class="header-anchor">#</a> $nextTick的作用</h2> <p><code>Vue</code> 实现响应式并不是数据发生变化之后 <code>DOM</code> 立即变化，而是按一定的策略（异步更新队列）进行 <code>DOM</code> 的更新。所以有时候我们想在数据修改后，立即对<code>DOM</code>状态做些什么，可能会有些棘手。所以<code>vue</code>提供了一个<code>$nextTick</code>方法，该方法会在组件的<code>dom</code>更新后会被触发。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$nextTick</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
  <span class="token comment">// 做一些DOM操作</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="开发组件如何自定义v-model"><a href="#开发组件如何自定义v-model" class="header-anchor">#</a> 开发组件如何自定义v-model</h2> <p><code>v-model</code>其实是一个语法糖</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>input v<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">&quot;searchText&quot;</span><span class="token operator">&gt;</span>

<span class="token comment">// 等价于</span>
<span class="token operator">&lt;</span>input
  v<span class="token operator">-</span>bind<span class="token operator">:</span>value<span class="token operator">=</span><span class="token string">&quot;searchText&quot;</span>
  v<span class="token operator">-</span>on<span class="token operator">:</span>input<span class="token operator">=</span><span class="token string">&quot;searchText = $event.target.value&quot;</span>
<span class="token operator">&gt;</span>
</code></pre></div><p>当给一个组件使用<code>v-model</code>时：</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>com-input</span>
  <span class="token attr-name">v-model&quot;searchText&quot;</span>
<span class="token punctuation">/&gt;</span></span>

<span class="token comment">&lt;!--等价于--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>com-input</span>
  <span class="token attr-name"><span class="token namespace">v-bind:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>searchText<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name"><span class="token namespace">v-on:</span>input</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>searchText = $event<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>在<code>com-input</code>组件内部，会自动接收<code>value</code>属性</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>value<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@input</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>change($event)<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
 <span class="token keyword">export</span> <span class="token keyword">default</span><span class="token punctuation">{</span>
   props<span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">&quot;value&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 组件内部自动结束value</span>
   methods<span class="token operator">:</span><span class="token punctuation">{</span>
     <span class="token function">change</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
       <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">,</span>e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">)</span> 
     <span class="token punctuation">}</span>
   <span class="token punctuation">}</span>
 <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>另外组件内部还可以修改接收的数据<code>value</code>，和自定义事件<code>input</code>的名字</p> <div class="language-vue extra-class"><pre class="language-vue"><code>model: {
  prop: 'checked',
  event: 'change'
},
props: {
    checked: Boolean
},
</code></pre></div><h2 id="computed和watch的区别与应用"><a href="#computed和watch的区别与应用" class="header-anchor">#</a> computed和watch的区别与应用</h2> <p><code>watch</code>和<code>computed</code>都是以<code>Vue</code>的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。</p> <ul><li><code>computed</code>计算属性，该属性的结果会被缓存，只有当被计算的值发生改变时才会触发</li> <li><code>watch</code> 没有缓存功能，其触发方式类似于监听机制 + 事件机制</li></ul> <p><strong>应用方面</strong></p> <ul><li><code>computed</code>擅长处理的场景：一个数据受多个数据影响</li> <li><code>watch</code>擅长处理的场景：一个数据影响多个数据</li></ul> <h2 id="简单说一下vue中双向数据绑定"><a href="#简单说一下vue中双向数据绑定" class="header-anchor">#</a> 简单说一下vue中双向数据绑定</h2> <p><code>vue</code>中的双向绑定主要使用了<code>Object.defineProperty()</code> 来劫持<code>data</code>中的数据，为其添加<code>getter</code>和<code>setter</code>方法。并在数据（对象）发生变动时触发响应的<code>setter</code>方法，然后通知订阅者<code>Dep</code>，触发相应的监听回调<code>Updater</code>。</p> <div class="imageWrapper block" data-v-a88366f6><div class="image" data-v-a88366f6><img src="img/web/question/vue.png" alt width="100%" data-v-a88366f6></div> <!----> <div class="imgModel" style="display:none;" data-v-a88366f6><img src="img/web/question/vue.png" class="scaleImg" data-v-a88366f6></div></div> <h2 id="router和-route的区别"><a href="#router和-route的区别" class="header-anchor">#</a> $router和$route的区别</h2> <ul><li><code>$router</code> 是路由操作对象，拥有<code>push()</code>,<code>replace()</code>,<code>go()</code>,<code>push()</code>等方法以及信息</li> <li><code>$route</code> 是当前激活的路由信息对象，里边存储着<code>path</code>,<code>name</code>,<code>query</code>,<code>params</code>,<code>meta</code>等信息</li></ul> <h2 id="params和query的区别"><a href="#params和query的区别" class="header-anchor">#</a> params和query的区别</h2> <p><code>params</code> 和 <code>query</code> 都是传参用的</p> <ul><li><code>params</code> 是只用命名路由<code>name</code>引入，参数不会显示在页面上（地址栏上）</li> <li><code>query</code> 可以通过<code>path</code>路径方式也可以通过<code>name</code>引入，参数会显示到地址栏上</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 路由</span>
<span class="token punctuation">{</span>
  path<span class="token operator">:</span><span class="token string">&quot;/about&quot;</span><span class="token punctuation">,</span>
  name<span class="token operator">:</span><span class="token string">&quot;About&quot;</span><span class="token punctuation">,</span>
  <span class="token function-variable function">component</span><span class="token operator">:</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&quot;@/views/about.vue&quot;</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><p>传参方式：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// params</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  name<span class="token operator">:</span><span class="token string">&quot;About&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 必须使用name</span>
  params<span class="token operator">:</span><span class="token punctuation">{</span>
    id<span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// query</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  path<span class="token operator">:</span><span class="token string">&quot;/about&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 也可以使用name，但一般使用path</span>
  query<span class="token operator">:</span><span class="token punctuation">{</span>
    id<span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>接收方式</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// params</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$route<span class="token punctuation">.</span>params<span class="token punctuation">;</span>

<span class="token comment">// query</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$route<span class="token punctuation">.</span>query<span class="token punctuation">;</span>
</code></pre></div><h2 id="vue-router导航钩子函数"><a href="#vue-router导航钩子函数" class="header-anchor">#</a> vue-router导航钩子函数</h2> <p><strong>全局钩子函数</strong></p> <ul><li><code>beforeEach</code> 进入路由前的钩子函数</li> <li><code>afterEach</code> 进入路由后的钩子函数</li></ul> <p><strong>组件内钩子函数</strong></p> <ul><li><p><code>beforeRouteEnter</code> 进入组件前,改函数中不能获取组件实例<code>this</code></p></li> <li><p><code>beforeRouteUpdate</code> 在当前路由改变，但是该组件被复用时调用,如<code>/foo/:id</code>，在 <code>/foo/1</code> 和 <code>/foo/2</code> 之间跳转的时候</p></li> <li><p><code>beforeRouteLeave</code> 导航离开该组件的对应路由时调用可以访问<code>this</code></p></li></ul> <h2 id="在vue中多页面如何共享数据"><a href="#在vue中多页面如何共享数据" class="header-anchor">#</a> 在vue中多页面如何共享数据</h2> <p><code>vue</code>中页面之间共享数据常用的几个方法</p> <ul><li>通过缓存（<code>SessionStorage</code>）进行数据共享</li> <li>通过路参传进行数据共享</li> <li>通过<code>vuex</code>进行数据共享</li> <li>以一个公共的<code>vue</code>实例作为桥梁，通过<code>$on</code>,<code>$emit</code>进行数据共享</li> <li>通过服务器进行数据共享</li></ul> <h2 id="vuex是什么-什么时候使用"><a href="#vuex是什么-什么时候使用" class="header-anchor">#</a> vuex是什么，什么时候使用</h2> <p><code>Vuex</code> 是一个专为 <code>Vue.js</code> 应用程序开发的状态管理模式。当我们开发中大型项目，各组件间需要共享很多数据的时候经常会用到<code>vuex</code>。</p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">最近更新时间:</span> <span class="time">7/2/2021, 11:27:27 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/web/question/css.html" class="prev">
        CSS 常见面试题
      </a></span> <!----></p></div></div> <div class="floatSilder hidden-sm-and-down"><div class="floatSilderWrapper" data-v-4100c7a9><div class="topTitle" data-v-4100c7a9>Vue2.x常见面试题</div> <div class="contentNav" data-v-4100c7a9><ul class="nav" data-v-4100c7a9><li class="title" data-v-4100c7a9><a href="#对mvvm的理解" data-v-4100c7a9>对MVVM的理解</a></li><li class="title" data-v-4100c7a9><a href="#vue的生命周期" data-v-4100c7a9>vue的生命周期</a></li><li class="title" data-v-4100c7a9><a href="#vue的常用指令有那些" data-v-4100c7a9>vue的常用指令有那些</a></li><li class="title" data-v-4100c7a9><a href="#v-if-和-v-show的区别" data-v-4100c7a9>v-if 和 v-show的区别</a></li><li class="title" data-v-4100c7a9><a href="#绑定class的数组用法" data-v-4100c7a9>绑定class的数组用法</a></li><li class="title" data-v-4100c7a9><a href="#v-on可以监听多个方法么" data-v-4100c7a9>v-on可以监听多个方法么</a></li><li class="title" data-v-4100c7a9><a href="#vue事件中如何使用event对象" data-v-4100c7a9>vue事件中如何使用event对象</a></li><li class="title" data-v-4100c7a9><a href="#vue中的数据传递" data-v-4100c7a9>vue中的数据传递</a></li><li class="title" data-v-4100c7a9><a href="#keep-alive的作用" data-v-4100c7a9>keep-alive的作用</a></li><li class="title" data-v-4100c7a9><a href="#refs的作用" data-v-4100c7a9>$refs的作用</a></li><li class="title" data-v-4100c7a9><a href="#vue中为什么使用key" data-v-4100c7a9>vue中为什么使用key</a></li><li class="title" data-v-4100c7a9><a href="#nexttick的作用" data-v-4100c7a9>$nextTick的作用</a></li><li class="title" data-v-4100c7a9><a href="#开发组件如何自定义v-model" data-v-4100c7a9>开发组件如何自定义v-model</a></li><li class="title" data-v-4100c7a9><a href="#computed和watch的区别与应用" data-v-4100c7a9>computed和watch的区别与应用</a></li><li class="title" data-v-4100c7a9><a href="#简单说一下vue中双向数据绑定" data-v-4100c7a9>简单说一下vue中双向数据绑定</a></li><li class="title" data-v-4100c7a9><a href="#router和-route的区别" data-v-4100c7a9>$router和$route的区别</a></li><li class="title" data-v-4100c7a9><a href="#params和query的区别" data-v-4100c7a9>params和query的区别</a></li><li class="title" data-v-4100c7a9><a href="#vue-router导航钩子函数" data-v-4100c7a9>vue-router导航钩子函数</a></li><li class="title" data-v-4100c7a9><a href="#在vue中多页面如何共享数据" data-v-4100c7a9>在vue中多页面如何共享数据</a></li><li class="title" data-v-4100c7a9><a href="#vuex是什么-什么时候使用" data-v-4100c7a9>vuex是什么，什么时候使用</a></li></ul></div></div></div></div> </main></div></div><div class="global-ui"><!----></div></div>
    <script src="/assets/js/app.f1a8d465.js" defer></script><script src="/assets/js/2.5bab2b7d.js" defer></script><script src="/assets/js/99.95d4993f.js" defer></script><script src="/assets/js/4.dca68745.js" defer></script>
  </body>
</html>
